<template>
    <div class="loss-diagram-wrap" :id="props.id">
      <lossDiagramCanvas :calcStart="props.calcStart" />
    </div>
  </template>
  <script lang="ts" setup>
  import { defineProps, onMounted, watch } from 'vue'
  import lossDiagramCanvas from './loss-diagram-canvas.vue'
  
  const props = defineProps({
    id: {
      type: String,
      default: ''
    },
    isRecover: {
      type: Boolean,
      default: () => false
    },
    calcStart: {
      type: Boolean,
      default: () => false
    }
  })
  
  const markLine = [
    // {
    //   // 固定起点的 x 像素位置，用于模拟一条指向最大值的水平线
    //   yAxis: '',
    //   x: '98%'
    // },
    {
      type: 'max'
    }
  ]
  
  watch(
    () => props.isRecover,
    () => {
      // initConfig()
    }
  )
  
  onMounted(() => {
    console.log('calcStart from echrats--', props.calcStart)
    // nextTick(() => {
    //   initConfig()
    // })
  })
  </script>
  <style lang="scss" scoped>
  .loss-diagram-wrap {
    width: 100%;
    height: 100%;
    overflow: hidden;
    .loss-diagram-wrap-inner {
      width: 100%;
      height: 100%;
      overflow: hidden;
      img {
        width: 100%;
        height: auto;
        // margin-left: -16px;
        margin-top: 5px;
      }
    }
  }
  </style>
  